<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
	<%@include file="../include_new.jsp"%>
	<script	src="../static/lib/ztree/jquery.ztree.all-3.5.min.js"></script>
	<link  href="../static/lib/ztree/zTreeStyle.css" type="text/css" rel="stylesheet" >
</head>
<body id="z_body">
<div id="app">
	<div class="row">
		<div class="col-xs-8">
			<form class="form-horizontal" id="form_1">
				<input name="id" v-model="one.id" type="hidden"/>
				<input name="jsids" v-model="jsids" type="hidden"/>
				
				<div class="form-group">
					<label class="col-xs-3">*账号</label>
					<div class="col-xs-7">
						<input class="form-control" name="zh" v-model="one.zh" validType="notEmpty">
					</div>
				</div>
			
				<div class="form-group">
					<label class="col-xs-3">*名称</label>
					<div class="col-xs-7">
						<input class="form-control" name="mc" v-model="one.mc" validType="notEmpty">
					</div>
				</div>
				
				<div class="form-group">
					<label class="col-xs-3">*所属单位</label>
					<div class="col-xs-7">
						<input class="form-control" name="ssdwdm" v-model="one.ssdwdm" validType="" type="hidden">
						<input class="form-control" name="ssdwmc" v-model="one.ssdwmc" validType="notEmpty" data_tree="{type:'organ'}">
					</div>
				</div>
				
				<div class="form-group">
					<label class="col-xs-3">代理单位</label>
					<div class="col-xs-7">
						<input class="form-control" name="dldwdm" v-model="one.dldwdm" validType="" type="hidden">
						<input class="form-control" name="dldwmc" v-model="one.dldwmc" validType="" data_tree="{type:'organ', multi:true}">
					</div>
				</div>
			
				<div class="form-group">
					<label class="col-xs-3">电话</label>
					<div class="col-xs-7">
						<input class="form-control" name="dh" v-model="one.dh" validType="">
					</div>
				</div>
				
				<div class="form-group">
					<label class="col-xs-3"></label>
					<div class="col-xs-7">
						<a class="btn btn-primary" onclick="save()">保存</a> &nbsp;
						<a class="btn" onclick="parent.closeModal()">取消</a>
					</div>
				</div>
				
			</form>
		</div>
		<div class="col-xs-4">
			<div>
				<span style="padding-right: 2em;">该用户被授权的角色</span>
				<label style="font-weight:normal;"><input type="checkbox" onclick="checkAll(this)"/> 全选/清空</label>
			</div>
			<div id="tree_1" class="ztree"></div>
		</div>
	</div>
			
</div>	
	
<script type="text/javascript">

	var id = "${id}";
	
	var vm = new Vue({
		el: "#app",
		data: {
			one: {},
			jsids: ''
		}
	});
	
	tool.query("../user/load4Update", {id: id}, function(data) {//提交
		vm.one = data.one;
		vm.jsids = data.jsids;
		initTree(data.roleList);
	});

	function initTree(treeNodes) {

		var treeSetting = {
			check: {
				enable: true,
				chkStyle: "checkbox",
				chkboxType: { "Y": "ps", "N": "ps" }
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid"
				},
				key:{name:'name'}
			},
			callback: {
				beforeClick: function(e, treeId, treeNode) {
				},
				onClick: function(e, treeId, treeNode) {
					var zTree = $.fn.zTree.getZTreeObj(treeId);
					zTree.checkNode(treeNode,null,true);
				},
				onCheck: function(e, treeId, treeNode){
				}
			}
		};
		
		//加载tree
		$.fn.zTree.init($("#tree_1"), treeSetting, treeNodes);
		$.fn.zTree.getZTreeObj("tree_1").expandAll(true);
		
		//自动勾选节点
		var jsids = vm.jsids;
		if(jsids.length > 0) {
			var tree = $.fn.zTree.getZTreeObj("tree_1");
			$(jsids.split(",")).each(function(){
				tree.checkNode(tree.getNodeByParam("id",this),true);
			});
		}
	}
	
	//获取勾选ids
	function getCheckedResIds() {
		var v = "";
		var zTree = $.fn.zTree.getZTreeObj("tree_1");
		var nodes = zTree.getCheckedNodes();
		nodes.sort(function compare(a,b){return a.id-b.id;});
		$(nodes).each(function(){
			if(v.length > 0) {
				v += ",";
			}
			v += this.id;
		});
		return v;
	}
	
	//全选
	function checkAll(dom) {
		var zTree = $.fn.zTree.getZTreeObj("tree_1");
		if($(dom).is(":checked")) {
			zTree.checkAllNodes(true);
		} else {
			zTree.checkAllNodes(false);
		}
	}

	//保存
	function save() {
		//赋值到表单:勾选的资源节点ids
		$("#form_1 [name='jsids']").val(getCheckedResIds());
	
		if(validateForm("form_1")) {//表单验证
			tool.save("../user/update", $("#form_1").serialize(), function(data) {//提交
				parent.getPage();
				setTimeout(function(){
					parent.closeModal();
				}, 800);
			});
		}
	}
	
	initTree();
</script>
<style type="text/css">
	#z_body{min-height:500px;}
</style>

</body>
</html>